import React, { Component } from 'react';
import './top_cart.css'
import Img_2 from '../../images/1.jpg'

import { shoppingCart, cuserInfo } from '../../../utils/api'
export default class Top_cart extends Component {

    constructor(props) {
        super(props);
        this.state = {
            shopCartList: [],
            num: 1
        }
    }

    // componentDidMount() {
    //     let data = {
    //         token: "Bearer " + localStorage.getItem('token')
    //     }
    //     console.log(data)
    //     shoppingCart(data).then((res) => {
    //         console.log(res, '哈哈哈')
    //         this.setState(() => {
    //             return {
    //                 shopCartList: res.data.data.list
    //             }
    //         })
    //     })
    // }
    goProductM = () => {
        this.props.history.push('/product_details')
    }

    render() {
        return (
            <div className="cart_hidden cart_content">
                {/* <div className="cart_message">
                    <p className="empty-cart">您的购物车是空的</p>
                </div> */}
                <form action="" className="cart-content">
                    {
                        this.state.shopCartList.map((item, index) => {
                            return (
                                <ul className="carts_items" key={index}>
                                    <li className="cart_item">
                                        <a onClick={this.goProductM.bind(this)}>
                                            <div className="cart_image">
                                                <img src={Img_2} alt="" />
                                            </div>
                                        </a>
                                        <div className="cart_item_title">
                                            <a onClick={this.goProductM.bind(this)}>
                                                <div className="item_title">
                                                    <font style={{ verticalAlign: 'inherit' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>HAHA小丑运动衫秋季黑色3D印花连帽衫-</font>
                                                        <font>S</font>
                                                    </font>
                                                </div>
                                            </a>
                                            <div className="product-quantity-box left">
                                                <span onClick={this.shopCountAM.bind(this)} className="ss-icon-two  product-minus">
                                                    <span className="icon-minus">-</span>
                                                </span>
                                                <input type="tel" className="quantity-two" value={this.state.num} />
                                                <span onClick={this.shopCountIM.bind(this)} className="ss-icon-two product-plus">
                                                    <span className="icon-plus">+</span>
                                                </span>
                                            </div>
                                        </div>
                                        <strong className="sale_price">
                                            <span className="money was-price">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>$ 91.98</font>
                                                </font>
                                            </span>
                                            <span className="money">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>$ 45.99</font>
                                                </font>
                                            </span>
                                        </strong>
                                    </li>
                                </ul>
                            )
                        })
                    }
                    <ul style={{ padding: '15px 20px' }}>
                        <li className="cart_subtotal">
                            <span className="subtotal_right">
                                <span className="money">
                                    <font style={{ verticalAlign: 'inherit' }}>
                                        <font style={{ verticalAlign: 'inherit' }}>$ 137.97</font>
                                    </font>
                                </span>
                            </span>
                            <span>
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}>小计</font>
                                </font>
                            </span>
                        </li>
                        <li className="cart_subtotal">
                            <button type="submit" className="action-button">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}>退房</font>
                                </font>
                            </button>
                        </li>
                    </ul>
                </form>
            </div>
        );
    }
    shopCountAM = () => {
        this.setState({
            num: (this.state.num - 1) >= 1?(this.state.num - 1):1
        })
    }
    shopCountIM = () => {
        this.setState({
            num: this.state.num + 1
        })
    }
}